<template>
  <div class="form">
    <el-form :label-position="labelPosition" label-width="100px">
      <el-form-item label="请上传图片" style="user-select: none">
        <el-upload
          action=none
          ref="upload"
          list-type="picture-card"
          multiple
          :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt="" v-model="formLabelAlign.pic = file.raw"
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="描述" style="user-select: none">
        <el-input v-model="formLabelAlign.description"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
      </el-form-item>
      <el-form-item label="联系方式" style="user-select: none">
        <el-input v-model="formLabelAlign.contactInfo"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}">
        </el-input>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="submit">提交</el-button>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Details",
  data() {
    return {
      labelPosition: 'left',
      formLabelAlign: {
        pic: '',
        description: '',
        contactInfo: '',
        myUser: {
          userName: ''
        }
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
      this.$refs.upload.clearFiles();
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
      console.log(file.raw);
      console.log(this.formLabelAlign.pic)
    },
    async submit() {
      let image = this.formLabelAlign.pic;
      let formData = new FormData;
      formData.append('image',image);
      const response = await request.put("/api/upload",formData);
      this.formLabelAlign.pic = response.data.data;
      this.formLabelAlign.myUser.userName = localStorage.getItem('userName');
      const res = await request.post("/api/message/add", this.formLabelAlign);
      if (res.status === 200) {
        if (res.data.success === true) {
          this.$message.success({
            title: "成功",
            message: res.data.message,
            duration: 1000
          });
          setTimeout(() => {
            this.$router.push({name: "window"});
          }, 1000)
        } else {
          this.$message.error({
            title: "失败",
            message: res.data.message
          })
        }
      } else {
        this.$message.error({
          title: "失败",
          message: "请求错误"
        })
      }
    },
  }
}
</script>

<style scoped>
.form {
  border-radius: 15px; /*圆角*/
  background-clip: padding-box; /*背景被裁剪到内边距框*/
  margin: 50px auto; /*边界 距上180px 左右居中*/
  width: 700px; /*表单宽度*/
  padding: 35px 35px 15px 35px; /*填充*/
  background: #cac6c6;
  border: 1px solid #eaeaea; /*边框*/
  box-shadow: 0 0 25px #cac6c6; /*隐形*/
}
</style>
